<template>
  <div class="menu">
    <ToolBar :show-all="false" :show-multiple="false" :add-data="setAddDialogVisible" :delete-data="deleteById" :update-data="updateById" :show-add="true"></ToolBar>
    <el-table
        border
        :data="tableData"
        row-key="id"
        :tree-props="{children:'menuList',hasChildren:'hasChildren'}">
      <el-table-column
          type="index"
          label="编号"
          width="60">
      </el-table-column>
      <el-table-column
          prop="menuName"
          label="菜单名称">
      </el-table-column>
      <el-table-column
          prop="orderNo"
          label="菜单排序">
      </el-table-column>
      <el-table-column
          prop="menuCode"
          label="菜单编码">
      </el-table-column>
      <el-table-column
          label="菜单图标">
        <template slot-scope="scope">
          <i :class="scope.row.summary"></i>
        </template>
      </el-table-column>
      <el-table-column
          prop="delete"
          label="菜单状态">
        <template slot-scope="scope">
          <!--          <el-tag :type="scope.row.delete?'danger':''"><span v-text="scope.row.delete?'停用':'正常'"></span></el-tag>-->
          <el-switch
              v-model="scope.row.delete" :disabled="scope.row.menuCode==='system'"
              :active-value="false"
              :inactive-value="true" @change="handleDelete(scope.row,false)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete( scope.row,true)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
          hide-on-single-page
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size=size
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
    <el-dialog :title="'菜单'+(operationType===0?'添加':'编辑')" top="5vh" :visible.sync="dialogVisible">
      <el-form :model="menu" :rules="rules" ref="ruleForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="父目录" :label-width="formLabelWidth" prop="pid">
              <el-select v-model="menu.pid" placeholder="请选择" value-key="id" class="w100" @change="treeData">
                <el-option label="目录" :value="0">目录</el-option>
                <el-option
                    v-for="item in treeData"
                    :key="item.menuName"
                    :label="item.menuName+(item.delete?'(已停用)':'')"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单类型" :label-width="formLabelWidth" prop="menuType">
              <el-radio-group v-model="menu.menuType">
                <el-radio :label="0">目录</el-radio>
                <el-radio :label="1">菜单</el-radio>
                <el-radio :label="2">按钮</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="menuName">
              <el-input v-model="menu.menuName" autocomplete="off" class="w100"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单编码" :label-width="formLabelWidth" prop="menuCode">
              <el-input v-model="menu.menuCode" autocomplete="off" class="w100"
                        :disabled="$store.state.userInfo.role.roleLevel!==1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="orderNo" label="菜单排序" :label-width="formLabelWidth">
              <el-input v-model="menu.orderNo" autocomplete="off" class="w100" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单路径" :label-width="formLabelWidth" prop="menuUrl">
              <el-input v-model="menu.menuUrl" autocomplete="off" class="w100"
                        :disabled="$store.state.userInfo.role.roleLevel!==1"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否启用" :label-width="formLabelWidth" prop="delete">
              <el-radio-group v-model="menu.delete" :disabled="menu.menuCode==='system'">
                <el-radio :label="false">是</el-radio>
                <el-radio :label="true">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="菜单图标" :label-width="formLabelWidth" prop="summary">
              <el-select v-model="menu.summary" :prefix="menu.summary" class="w100" filterable>
                <el-option v-for="item in iconList" :value="item.name">
                  <i :class="item.name">{{ item.name }}</i>
                </el-option>

              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addMenu" v-if="operationType===0">确 定 添 加</el-button>
        <el-button type="primary" @click="updateMenu" v-else>确 定 修 改</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import ToolBar from "@/components/common/ToolBar";

export default {
  name: "Menu",
  components: {ToolBar},
  data() {
    return {
      currentPage: 1,
      total: 0,
      size: 10,
      tableData: [],
      treeData: [],
      defaultProps: {
        children: 'menuList',
        label: 'menuName'
      },
      menu: {
        menuCode: null,
        menuName: null,
        menuType: null,
        orderNo: null,
        pid: null,
        summary: null,
        delete: false,
        menuUrl: null,

      },
      operationType: 0,
      dialogVisible: false,
      formLabelWidth: '100px',
      iconList: [],
      rules: {
        menuType: [
          {required: true, message: '请选择菜单类型...', trigger: 'change'},
        ],
        menuName: [
          {required: true, message: '请输入菜单名称...', trigger: 'blur'}
        ],
        menuCode: [
          {required: true, message: '请输入菜单编码...', trigger: 'blur'}
        ],
        menuUrl: [
          {required: true, message: '请输入菜单路径...', trigger: 'blur'}
        ],
        orderNo: [
          {required: true, message: '请输入菜单排序...', trigger: 'blur'}
        ],
        delete: [
          {required: true, message: '请选择菜单状态...', trigger: 'change'}
        ],
        type: [
          {required: true, message: '请选择菜单类型...', trigger: 'change'}
        ],
        pid: [
          {required: true, message: '请选择父级目录...', trigger: 'change'}
        ],
        summary: [
          {required: true, message: '请选择菜单图标...', trigger: 'change'}
        ]
      }
    }
  },
  watch: {
    dialogVisible: {
      handler(newVal, oldVal) {
        if (oldVal) {
          this.menu = {}
        }
      }
    }
  },
  created() {
    this.getDataList()
    this.getTreeDataList()
    this.getIconList()
  },
  methods: {
    handleEdit(index, row) {
      this.operationType = 1
      this.menu = this.$tools.deepClone(row)
      this.dialogVisible = true
    },
    handleDelete(row, isDelete) {
      this.deleteMenu(row, isDelete)
    },
    getDataList() {
      axios.get("/menu/list/" + this.currentPage + "/" + this.size).then(res => {
        console.log("菜单列表：", res)
        if (res.data.success) {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
          this.pages = res.data.data.pages
        }
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val
      this.getDataList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val
      this.getDataList()
    },
    deleteById() {
      console.log("菜单删除")
    },
    setAddDialogVisible() {
      this.operationType = 0;
      this.dialogVisible = true

    },
    getTreeDataList() {
      axios.get("/menu/list/0").then(res => {
        console.log("菜单列表2：", res)
        if (res.data.success) {
          this.treeData = res.data.data
        }
      })
    },
    selectChange() {
    },
    addMenu() {
      if (this.$refs.ruleForm.validate((valid => {
        if (valid) {
          this.menu.createUserId = this.$store.state.userInfo.id
          if (this.menu.pid === 0) {
            this.menu.menuType = 0
          }
          axios.post("/menu/add", this.menu).then(res => {
            if (res.data.success) {
              this.$tools.showMessage(res.data.message, "success")
              this.getDataList()
              this.dialogVisible = false
              this.operationType = 0
              this.menu = {}
              this.getMenuList()
            } else {
              this.$tools.showMessage(res.data.message, "error")
            }
          })

        } else {
          this.$tools.showMessage("请完善表单信息...", 'warning')

        }
      }))) ;

    },
    updateMenu() {
      if (this.$refs.ruleForm.validate((valid => {
        if (valid) {
          this.menu.updateUserId = this.$store.state.userInfo.id
          axios.post("/menu/update", this.menu).then(res => {
            if (res.data.success) {
              this.$tools.showMessage(res.data.message, "success")
              this.getDataList()
              this.dialogVisible = false
              this.operationType = 0
              this.menu = {}
              this.getMenuList()
            } else {
              this.$tools.showMessage(res.data.message, "error")
            }
          })
        } else {
          this.$tools.showMessage("请完善表单信息...", 'warning')

        }
      }))) ;
    },
    deleteMenu(menu, isDelete) {
      console.log("菜单删除")
      console.log(menu.delete)
      let uid = this.$store.state.userInfo.id
      switch (isDelete) {
        case true:
          this.$tools.showMessageBox(menu.pid === null ? "确认删除菜单" + menu.menuName + "及其子菜单？" : "确认删除菜单" + menu.menuName, '提示', "warning").then(confirm => {
            axios.post("/menu/delete/" + uid + "/1", menu).then(res => {
              if (res.data.success) {
                this.$tools.showMessage(res.data.message, "success")
                this.getDataList()
                this.getMenuList()
              } else {
                this.$tools.showMessage(res.data.message, "danger")
              }
            })
          }).catch(cancel => {
            this.getDataList()
            this.$tools.showMessage("操作取消！", "info")
          })
          break;
        case false:
          let p = menu.pid === null
          let d = menu.delete
          console.log("D:", d)
          let message1 = d ? '停用' : '启用'
          let message2 = p ? menu.menuName + '及其子菜单' : menu.menuName
          let message = '确认' + message1 + message2
          this.$tools.showMessageBox(message, '提示', "warning").then(confirm => {
            axios.post("/menu/delete/" + uid + "/0", menu).then(res => {
              if (res.data.success) {
                this.$tools.showMessage(res.data.message, "success")
                this.getDataList()
                this.getMenuList()
              } else {
                this.$tools.showMessage(res.data.message, "danger")
              }
            })
          }).catch(cancel => {
            this.getDataList()
            this.$tools.showMessage("操作取消！", "info")
          })
      }


    },
    updateById() {
      console.log("菜单修改")
    },
    getIconList() {
      axios.get("/icon/list").then(res => {
        this.iconList = res.data.data
      })
    },
    getMenuList() {
      axios.get("/menu/list/role/" + this.$store.state.userInfo.roleId + "/1").then(res => {
        if (res.data.success) {
          this.$store.commit("setMenus", res.data.data)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
